<template>
  <div class="wrap">
    <img
      src="@/assets/css/images/question.svg"
      alt=""
      style="width: 45px; height: 45px; vertical-align: middle"
    />
    <b> 出 题</b>

    <el-tooltip
      class="item"
      effect="dark"
      content="设置视频中弹出的问题"
      placement="right"
    >
      <img
        src="@/assets/css/images/doubt.svg"
        alt=""
        style="width: 15px; height: 15px; margin-left:5px;margin-top:5px"
      />
    </el-tooltip>
    <br /><br />
    <el-card style="auto">
      <div class="fom">
        <!-- <h2>录入试题</h2> -->
        <br />
        <el-form :model="obj">
          <el-row>
            <el-col span="6">
              <el-form-item label=" 题 型：" required>
                <el-select
                  placeholder="选择题型"
                  v-model="obj.type"
                  @change="showlab"
                >
                  <el-option
                    v-for="(item, index) in types"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label=" 题目难度：">
                <el-select placeholder="选择难度" v-model="obj.bar">
                  <el-option
                    v-for="(item, index) in levels"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item
                label="插入视频："
                prop="video"
                placeholder="请选择"
              >
                <el-select v-model="obj.video" :options="videoList" filterable>
                  <el-option
                    v-for="item in videoList"
                    :key="item.url"
                    :label="item.oldname"
                    :value="item.oldname"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label=" 问题弹出时间：">
                <el-time-select
                  v-model="obj.time"
                  :picker-options="{
                    start: '00:00',
                    step: '00:01',
                    end: '20:00',
                  }"
                  placeholder="选择时间点"
                >
                </el-time-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label=" 题 干：">
            <b
              @click="uploadDlg = true"
              style="float:right;cursor:pointer;color:blue"
              >上传图片识别题目内容</b
            >
            <br />

            <quill-editor ref="myQuillEditor" v-model="obj.questionTitle" />
          </el-form-item>
          <el-form-item label=" 答 案：">
            <el-input type="textarea" :rows="4" v-model="obj.answer" />
          </el-form-item>

          <div :class="show ? 'block' : 'none'">
            <p>选 项<el-button class="addbtn" @click="addopn">+</el-button></p>
            <p class="lab clearbox" v-for="(item, index) in optin" :key="index">
              <el-input v-model="item.value" style="margin-bottom:10px" />
              <el-button class="delbtn" @click="delopn(index)">-</el-button>
            </p>
          </div>
          <!-- <div>
            <h3>插入视频名称</h3>
            <el-checkbox-group v-model="obj.tags">
              <el-checkbox
                :label="item.tagId"
                v-for="item in tags"
                :key="item.tagId"
              >
                {{ item.tagName }}
              </el-checkbox>
            </el-checkbox-group>
          </div> -->
          <div class="footer">
            <el-button type="primary" @click="subfun" class="btn1 btn2"
              >提交</el-button
            >
            <el-button type="success" @click="resfun" class="btn1 btn3"
              >重置</el-button
            >
          </div>
        </el-form>
      </div>
    </el-card>
    <el-dialog :visible.sync="uploadDlg" width="40%" style="text-align: center">
      <el-upload
        class="upload"
        ref="upload"
        drag
        :on-success="photoRecognition"
        action="http://192.168.43.79:8080/problem/problemPhotoHandle"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Addtk",
  data() {
    return {
      tags: [], //标题组
      types: [
        "请选择",
        "单选题",
        "多选题",
        "填空题",
        "判断题",
        "简答题",
        "输出题",
        "编程题",
      ], //题型
      levels: ["请选择", "简单", "容易", "中", "难", "非常难"], //难易程度
      obj: {
        video: "",
        type: "",
        questionTitle: "",
        answer: "",
        // questionOptions: "",
        bar: "",
        time: "",
      },
      //当前选择的视频
      videoList: [
        {
          name: "shipin.mp5",
          url: "1",
        },
        {
          name: "操作系统.mp4",
          url: "2",
        },
        {
          name: "database.avi",
          url: "3",
        },
        {
          name: "apple.flv",
          url: "4",
        },
      ],
      show: false, //判断选项框的隐藏显示
      optin: [{ id: "", value: "" }], //多个选项框
      form: {
        id: "",
      },
      video: "",
      uploadDlg: false,
    };
  },
  mounted() {
    this.getVideoList();
    this.form.id = parseInt(localStorage.getItem("rid")) + 1;
  },
  methods: {
    //获取视频列表
    getVideoList() {
      // let url = this.systemURL+"/problem/videoList";
      this.$http
        .post(`${this.systemURL}/problem/videoList`, this.form)
        .then((res) => {
          console.log(res.data.data);
          this.videoList = res.data.data;
        });
    },
    showlab: function() {
      //判断选择单选和多选时，显示选项框
      if (this.obj.type == 1 || this.obj.type == 2) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    addopn: function() {
      //添加选项框
      var x = this.optin;
      x.push({ id: x.length - 1, value: "" });
      this.optin = x;
    },
    delopn: function(index) {
      //删除选项框
      var x = this.optin;
      x.splice(index, 1);
      this.optin = x;
    },
    subfun: function() {
      //表单验证
      var flg = true;
      if (this.obj.type == 1 || this.obj.type == 2) {
        //当为单选或多选时才验证选项框
        for (var i = 0; i < this.optin.length; i++) {
          if (this.optin[i].value == "") {
            flg = false;
            break;
          }
        }
      }
      if (this.obj.type < 1 || this.obj.type > 7) {
        this.$message.error("请选择题型");
      } else if (this.obj.questionTitle == "") {
        this.$message.error("请填写题干");
      } else if (this.obj.answer == "") {
        this.$message.error("请填写答案");
      } else if (flg == false) {
        this.$message.error("选项框不能为空");
      } else if (this.obj.level < 1 || this.obj.level > 5) {
        this.$message.error("请选择难度");
      }
      //else if (this.obj.tags.length == 0) {
      //   this.$message.error("请选择插入视频");
      // }
      else {
        var x = [];
        for (var j = 0; j < this.optin.length; j++) {
          x.push(this.optin[j].value);
        }
        this.obj.questionOptions = x;
        var str = "";
        for (var v in Object.keys(this.obj)) {
          str += "&" + v + "=" + this.obj[v];
        }
        str = str.substring(1);
        console.log(this.obj);
        this.$http
          .post(`${this.systemURL}/problem/add`, this.obj)
          .then(function(res) {
            console.log(res);
            if(res.status = 200)
            alert("操作成功!")
            this.$router.push("/system/teacher/questionList")
          });
      }
    },
    photoRecognition(response,file,fileList){
      console.log(response);
      this.obj.questionTitle = response.data
      // this.$refs.upload.clearFiles()
      this.uploadDlg = false
    },
    // 重置表单
    resfun: function() {
      this.obj = {};
      this.optin = [];
    },
  },
};
</script>

<style scoped>
.lab {
  width: 80%;
  margin: 20px auto;
}
.fom .addbtn {
  margin-left: 20px;
  width: 30px;
}
.lab .el-input {
  float: left;
  width: 80%;
}
.lab .el-button {
  float: left;
  margin-left: 15px;
  margin-top: 15px;
  width: 30px;
}
.fom .lab .el-button {
  float: left;
  margin-left: 15px;
  margin-top: 0;
  width: 30px;
}
.none {
  display: none !important;
}
.block {
  display: block !important;
}
.footer {
  vertical-align: middle;
  text-align: center;
  /* display: flex; */
  margin-top: 12%;
}
</style>
